<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
  <style>
	.box {
		height: 500px;
		width: 500px;
		border: 2px solid #008000
	}
	.box1 {
		height: 300px;
		width: 300px;
		border: 2px solid #F00
	}
	.box2 {
		height: 100px;
		width: 100px;
		background-color: #0000FF;
	}
  </style>
</head>
<body>

<div id="app">
	<h1>{{ msg }}</h1>
	<hr>
	<span>{{ counter }}</span>
	<button v-on:click="counter++">counter++</button>
	<button @click="add">counter+=10</button>
	<button @click="add1(123, $event)">counter+=2</button>
	<!-- $event -->
	<!-- 事件修饰符 -->
	<div @click.once="handleClick('box -----')" @contextmenu.prevent.once="handleMenu" class="box">
		<div class="box1"  @click.stop="handleClick('box1 11111')">
			<div class="box2" @click.stop="handleClick('box2 222222', $event)"></div>
		</div>
	</div>
	<input type="text" v-model="msg" @keydown="onKey">
	<br>
	<!-- <input type="text" v-model="msg" @keydown.enter="onKey"> -->
	<!-- <input type="text" v-model="msg" @keydown.13="onKey"> -->
	<input type="text" v-model="msg" @keydown.aaa.shift="onKey">
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
